<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #8c8c8c;
            font-size: 0.75rem;
        }
        .nav-item.active {
            color: #0052d9;
        }
        .icon {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }
        .cart-card {
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .counter-btn {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f5f5f5;
            color: #666;
        }
        .counter-input {
            width: 40px;
            text-align: center;
            border: none;
            background: transparent;
        }
        .checkout-bar {
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body class="min-h-screen">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="javascript:history.back()" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">购物车</h1>
        <span class="text-sm text-gray-500">管理</span>
    </header>

    <main class="pb-32">
        <!-- 购物车列表 -->
        <div class="mt-3 px-4">
            <!-- 店铺1 -->
            <div class="bg-white cart-card mb-3">
                <div class="p-3 border-b border-gray-100 flex items-center">
                    <input type="checkbox" class="mr-2 w-4 h-4 accent-blue-600">
                    <i class="icon iconfont icon-shop mr-1 text-gray-600"></i>
                    <span class="text-sm font-medium">清镇苗族手工艺品店</span>
                    <i class="icon iconfont icon-arrow-right text-gray-400 text-xs ml-auto"></i>
                </div>
                
                <!-- 商品1 -->
                <div class="p-3 flex">
                    <input type="checkbox" class="mr-2 self-center w-4 h-4 accent-blue-600">
                    <div class="w-20 h-20 bg-gray-100 rounded-md overflow-hidden">
                        <img src="https://via.placeholder.com/80x80?text=苗族银饰" class="w-full h-full object-cover" alt="苗族银饰">
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="text-sm font-medium">贵州苗族银饰项链 传统手工艺 民族特色礼品</div>
                        <div class="text-xs text-gray-500 mt-1">规格：925银</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-medium">¥298.00</div>
                            <div class="flex items-center">
                                <button class="counter-btn">-</button>
                                <input type="text" class="counter-input" value="1">
                                <button class="counter-btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 商品2 -->
                <div class="p-3 flex border-t border-gray-100">
                    <input type="checkbox" class="mr-2 self-center w-4 h-4 accent-blue-600">
                    <div class="w-20 h-20 bg-gray-100 rounded-md overflow-hidden">
                        <img src="https://via.placeholder.com/80x80?text=蜡染" class="w-full h-full object-cover" alt="蜡染">
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="text-sm font-medium">贵州侗族蜡染围巾 纯棉手工艺品</div>
                        <div class="text-xs text-gray-500 mt-1">规格：180*60cm</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-medium">¥168.00</div>
                            <div class="flex items-center">
                                <button class="counter-btn">-</button>
                                <input type="text" class="counter-input" value="1">
                                <button class="counter-btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 店铺2 -->
            <div class="bg-white cart-card mb-3">
                <div class="p-3 border-b border-gray-100 flex items-center">
                    <input type="checkbox" class="mr-2 w-4 h-4 accent-blue-600">
                    <i class="icon iconfont icon-shop mr-1 text-gray-600"></i>
                    <span class="text-sm font-medium">茅台镇酱香白酒旗舰店</span>
                    <i class="icon iconfont icon-arrow-right text-gray-400 text-xs ml-auto"></i>
                </div>
                
                <!-- 商品1 -->
                <div class="p-3 flex">
                    <input type="checkbox" class="mr-2 self-center w-4 h-4 accent-blue-600">
                    <div class="w-20 h-20 bg-gray-100 rounded-md overflow-hidden">
                        <img src="https://via.placeholder.com/80x80?text=白酒" class="w-full h-full object-cover" alt="白酒">
                    </div>
                    <div class="ml-3 flex-1">
                        <div class="text-sm font-medium">贵州茅台镇酱香型白酒 53度500ml 传统工艺</div>
                        <div class="text-xs text-gray-500 mt-1">规格：酱香型·礼盒装</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-medium">¥399.00</div>
                            <div class="flex items-center">
                                <button class="counter-btn">-</button>
                                <input type="text" class="counter-input" value="2">
                                <button class="counter-btn">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 优惠信息 -->
        <div class="mt-3 px-4">
            <div class="bg-white cart-card p-3">
                <div class="flex justify-between items-center py-2">
                    <span class="text-sm">优惠券</span>
                    <div class="flex items-center text-sm text-gray-500">
                        <span>3张可用</span>
                        <i class="icon iconfont icon-arrow-right text-xs ml-1"></i>
                    </div>
                </div>
                <div class="flex justify-between items-center py-2 border-t border-gray-100">
                    <span class="text-sm">积分抵扣</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-500 mr-2">可用520积分抵¥5.2</span>
                        <input type="checkbox" class="w-4 h-4 accent-blue-600">
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 满减提示 -->
        <div class="mt-3 px-4">
            <div class="bg-white cart-card p-3">
                <div class="flex items-center">
                    <span class="px-2 py-1 text-xs text-red-500 bg-red-50 rounded mr-2">满减</span>
                    <span class="text-sm">已满¥800，再买¥200享8.5折</span>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 结算栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white checkout-bar">
        <div class="flex items-center p-3">
            <div class="flex items-center">
                <input type="checkbox" class="mr-2 w-4 h-4 accent-blue-600">
                <span class="text-sm">全选</span>
            </div>
            <div class="flex-1 text-right mr-4">
                <div class="flex items-center justify-end">
                    <span class="text-sm">合计：</span>
                    <span class="text-lg font-bold text-red-500">¥1264.00</span>
                </div>
                <div class="text-xs text-gray-500">共4件商品，已优惠¥45.00</div>
            </div>
            <button class="bg-blue-600 text-white rounded-full px-5 py-2 text-sm font-medium">
                结算(4)
            </button>
        </div>
        
        <!-- 底部导航 -->
        <div class="flex justify-around py-2 border-t border-gray-200">
            <a href="../core/home.html" class="nav-item">
                <i class="icon iconfont icon-home"></i>
                <span>首页</span>
            </a>
            <a href="../core/discover.html" class="nav-item">
                <i class="icon iconfont icon-discover"></i>
                <span>发现</span>
            </a>
            <a href="../core/messages.html" class="nav-item">
                <i class="icon iconfont icon-message"></i>
                <span>消息</span>
            </a>
            <a href="../core/profile.html" class="nav-item">
                <i class="icon iconfont icon-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>
</html> 